<template lang="">
    <div>
        <!-- {{citylist}} -->
        <van-field label='标题' v-model='form.title'/>
        <van-field label='价格' v-model='form.price'/>
        <select v-model='form.city_id'>
            <option :value="i.id" v-for='i in citylist'>{{i.name}}</option>
        </select>
        <van-uploader :after-read='upload' />
        <van-button @click='add'>提交</van-button>
        <br/>
        城市：
        <table>
            <tr>
                <td v-for='i in citylist'>
                    <button @click='changecity(i.id)' :class="i.id == cityid?'active':''">{{i.name}}</button>
                    
                </td>
            </tr>
        </table>

        商品信息
        <table>
            <tr>
                    <td></td>
                    <td></td>
                    <td></td>
            </tr>
            <tr v-for='i in sceniclist'>
                    <td>{{i.title}}</td>
                    <td></td>
                    <td></td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data(){
        return{
            form:{pic:'',city_id:0},
            citylist:[],
            cityid:0,
            sceniclist:[],
            
        }
    },
    
    methods: {
        upload(file){
            //图片上传操作
            let formdata = new FormData()
            formdata.append('file',file.file)
            formdata.append('cityid',this.form.city_id)
            this.$axios.post('/text/uploads',formdata).then(res=>{
                if(res.data.code == 200){
                    alert(res.data.url)
                    this.form.pic = res.data.url
                }
            })


        },
        add(){
            this.$axios.post('/text/prom',this.form).then(res=>{
                if(res.data.code==200){
                    alert('添加成功')
                    this.getsceniclist()
                }
            })
        },
        //获取城市信息                                                                                                                                  
        getcitylist(){
            this.$axios.get('text/citym')
            .then(res=>{
                if(res.data.code==200){
                    this.citylist = res.data.list
                    //默认选中第一个
                    this.form.city_id = this.citylist[0]['id']
                }
            })
        },
        //点击城市，展示城市下的景点
        changecity(id){
            this.cityid = id
            this.getsceniclist()
        },
        //获取景点信息
        getsceniclist(){
            this.$axios.get('text/prom?cityid='+this.cityid).then(res=>{
                this.sceniclist = res.data.list
                this.getcitylist()
            })
        },
        priceorder(){
            if (this.sort == 'asc'){
                this.sort == 'desc'
            }else{
                this.sort == 'asc'
            }
            this.getsceniclist()
        }
    },
    mounted() {
        
        this.getsceniclist()
    },
}
</script>
<style lang="">
.active{
    background-color: aqua;
}
</style>